{% extends "base.html" %}
{% block title %}预约日志{% endblock %}

{% block content %}

<style>
    /* 自定义样式 */
    .timeline-accordion {
        border-left: 3px solid #0d6efd;
        margin-left: 1rem;
    }

    .timeline-item {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1.5rem;
    }

    .timeline-item:before {
        content: "";
        position: absolute;
        left: -0.65rem;
        top: 1.5rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #0d6efd;
        z-index: 1;
    }

    .log-content {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
        border-left: 3px solid #6c757d;
    }

    .log-title {
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.5rem;
    }

    .log-meta {
        padding-top: 10px;
        font-size: 0.85rem;
        color: #6c757d;
    }
</style>
<div class="container">

    <div class="card-header d-flex justify-content-between align-items-center">
        <h2 class="mb-4"><i class="bi bi-clock-history me-2"></i>预约日志记录</h2>
    </div>

    <!-- 时间轴手风琴 -->
    <div class="accordion timeline-accordion" id="logAccordion">
        {% for imaotailog_k,imaotailog_v in imaotailogs.items() %}
        <div class="accordion-item border-0 bg-transparent">
            <h2 class="accordion-header">
                <button class="accordion-button bg-white shadow-sm rounded" type="button" data-bs-toggle="collapse"
                    data-bs-target="#log{{imaotailog_k}}" style="margin-left: -1.3rem;">
                    <i class="bi bi-calendar-check me-2 text-primary"></i>
                    <span class="fw-bold">{{ imaotailog_k }}</span>
                </button>
            </h2>
            <div id="log{{imaotailog_k}}" class="accordion-collapse collapse show" data-bs-parent="#logAccordion">
                <div class="accordion-body timeline-item pt-0">
                    {% for title,data in imaotailog_v.items() %}
                    <div class="log-content mb-3">
                        <div class="log-title">{{ data.user.imaotai_user_name }} | {{ data.user.mobile }} </div>
                        {% for log in data.log %}
                        <div class="log-meta">
                            {{ log.message }} | {{log.created_time}}
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% else %}
        <div>暂无数据</div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block scripts %}

{% endblock %}